/* Welcome to Compass.
 * In this file you should write your main styles. (or centralize your imports)
 * Import this file using the following HTML or equivalent:
 * <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */

@import "compass/reset";
@import "normalize.css";
@import "compass"; 
@import "main.css";


* {
  @include box-sizing(border-box);
}

/* colors */
/* ========================================= */

$darkGrey : #212221;
$adWordsBlue: #4285f4;
$adWordsGreen: #38ad5c;
$adWordsYellow: #f4b400;
$adWordsRed: #ea3131;

/* fonts */
/* ========================================= */

body{
	font-family: 'Open Sans', sans-serif;
}



@font-face{
font-family:Batch; 
src:url('fonts/batch.eot');
src:url('fonts/batch.eot?#iefix') format('embedded-opentype'),
  url('fonts/batch.woff') format('woff'),
  url('fonts/batch.ttf') format('truetype'),
  url('fonts/batch.svg#batchregular') format('svg');
font-weight:normal;
font-style:normal;
}

.batch {
	font-family:"Batch"!important; 
	font-size:16px;
	line-height:1;
	display:inline-block;
	font-weight:100!important;
}

/* type */
/* ========================================= */

h1{
	font-size:32px;
	color:#fff;
	margin:10px 0 20px 0;
	font-weight:200;

	&.dark{
		color:#333;
	}
}

h2{
	font-size:28px;
	color:#fff;
	margin:10px 0 20px 0;
	font-weight:200;
}

h3{
	font-size:24px;
	color:#fff;
	margin:10px 0 20px 0;
	font-weight:200;
	line-height:30px;
}


h5{
	font-size:16px;
	color:#686868;
	margin:0 0 15px 0;
	font-weight:400;
}
h6{
	font-size:12px;
	color:#fff;
	@include opacity(0.6);
	margin:10px 0 0;
	line-height:14px;
}

p.lead{
	font-size:16px;
	line-height:24px;
	color:#838383;
	font-weight:200;
}

p{
	font-size:15px;
	line-height:18px;
	margin:0 0 20px 0;
	color:#333;
	font: 16px/25px 'Open Sans',arial,sans-serif;
	font-weight: 400;
}

a{
	color:#fff;
	text-decoration:none;
}

strong{
	font-weight:bold;
}

.help{
	padding-left:30px;
	background:url(../img/icon-help2.png) 0 0 no-repeat;
}
/* don't over think it grids */
/* ========================================= */
$pad: 40px;

.grid {
  margin: 0 0 $pad 0;
  
  &:after {
    /* Or @extend clearfix */
    content: "";
    display: table;
    clear: both;
  }
}

[class*='col-'] {
  float: left;
  padding-right: $pad;
  .grid &:last-of-type {
    padding-right: 0;
  }
}
.col-2-3 {
  width: 66.66%;
}
.col-1-3 {
  width: 33.33%;
}
.col-1-2 {
  width: 50%;
}
.col-1-4 {
  width: 25%;
}
.col-1-8 {
  width: 12.5%;
}

/* Opt-in outside padding */
.grid-pad {
  padding: $pad 0 $pad $pad;
  [class*='col-']:last-of-type {
    padding-right: $pad;
  }
}



/* common */
/* ========================================= */
.wrapper{
	width:900px;
	margin:0 auto;
}

.pull-right{
	float:right;
}


/* Header */
/* ========================================= */

.header-container{
	background: $darkGrey;
	border:none;
	padding:50px 0 20px 0;
}

h1.title{
	@include inline-block;
}

nav {
	padding-top:40px;
	@include inline-block;
	float:right;
	ul{
		text-align:right;
		li{
			@include inline-block;
		}

	}
	a{
		background:transparent;
		font-family: 'Roboto Condensed', sans-serif;
		font-size:14px;
		font-weight:300;
		width:auto;
		margin:0 0 0 40px;
		@include inline-block;
		float:none;
		padding:0 0 4px 0;
		border-bottom:5px solid transparent;

		&.selected{
			border-bottom:5px solid $adWordsBlue;
		}
	}
	
}
/* buttons */
/* ========================================= */
.btn{
	@include inline-block;
	padding:18px 55px 18px 18px;
	font-family: 'Roboto', sans-serif;
	color:#fff;
	font-weight:400;
	
	@include border-radius(3px);
	position:relative;
	z-index:1;

	&.orange{
		background:#f4b400;
		@include box-shadow(0px 2px 0px #be8c00);
		text-shadow:0px 1px 0px rgba(154,108,29,0.75);

		&:after{
			content:'';
			display:block;
			position:absolute;
			top:0;
			right:0;
			width:35px;
			height:100%;
			background:#f49b00 url('../img/icon-right-arrow.png') 50% 50% no-repeat;
			@include border-radius(0 3px 3px 0);
			z-index:2;
		}

		&:hover{
			background:#f49b00;
			@include box-shadow(0px 2px 0px #be6b02);
			
			&:after{
				background:#dc8c00 url('../img/icon-right-arrow.png') 50% 50% no-repeat;
			}
		}
	}

	&.download{
		&.orange:after{
			background:#f49b00 url('../img/icon-download.png') 50% 50% no-repeat;
		}
		&.orange:hover:after{
			background:#dc8c00 url('../img/icon-download.png') 50% 50% no-repeat;
		}

		&.blue:after{
			background:#2d67c5 url('../img/icon-download.png') 50% 50% no-repeat;
		}	
		&.blue:hover:after{
			background:#2455a4 url('../img/icon-download.png') 50% 50% no-repeat;
		}
		&.grey:after{
			background:#151515 url('../img/icon-download.png') 50% 50% no-repeat;
		}
		&.grey:hover:after{
			background:#000000 url('../img/icon-download.png') 50% 50% no-repeat;
		}
	}

	&.blue{
		background:#3f80ea;
		@include box-shadow(0px 2px 0px #2458ac);

		&:after{
			content:'';
			display:block;
			position:absolute;
			top:0;
			right:0;
			width:35px;
			height:100%;
			background:#2d67c5 url('../img/icon-right-arrow.png') 50% 50% no-repeat;
			@include border-radius(0 3px 3px 0);
			z-index:2;
		}

		&:hover{
			background:#366ec8;
			@include box-shadow(0px 2px 0px #1a4386);
			
			&:after{
				background:#2455a4 url('../img/icon-right-arrow.png') 50% 50% no-repeat;
			}
		}
	}

	&.grey{
		background:#242524;
		@include box-shadow(0px 2px 0px #000000);

		&:after{
			content:'';
			display:block;
			position:absolute;
			top:0;
			right:0;
			width:35px;
			height:100%;
			background:#151515 url('../img/icon-right-arrow.png') 50% 50% no-repeat;
			@include border-radius(0 3px 3px 0);
			z-index:2;
		}

		&:hover{
			background:#111111;
			@include box-shadow(0px 2px 0px #000000);
			
			&:after{
				background:#000000 url('../img/icon-right-arrow.png') 50% 50% no-repeat;
			}
		}
	}

	&.small{
		padding:10px 55px 10px 18px;
		font-size:12px;
	}
}

/* promos */
/* ========================================= */
.promo{
	padding:50px 0;
	position:relative;

	&:after{
		content:'';
		display:block;
		z-index:10;
		position:absolute;
		bottom:0;
		left:0;
		width:100%;
		@include opacity(0.5);
		height:5px;
		background:url(../img/bg-bottom-shadow.png) 0 100% repeat-x;
	}

	.content{
		float: right;
		width: 380px;
		margin-top: 50px;
		margin-right: 40px;
	}
	figure{
		float:left;
		width:450px;

		img{
			@include transition(all 0.2s ease-in-out);
		}

		&:hover{
			
		}
	}

	&.mirror{
		.content{
			float:left;
			width:420px;
		}
		figure{
			width:380px;
			float:right;
			img{
				float:right;
			}
		}
	}
}
.promo.prototype{
	background:#5a636a;
	height:350px;
	overflow:hidden;

	figure img{
		width:400px;
	}
	p{
		color:#a0b1be;
	}
} 

.promo.hig{
	background:#3c76d6;
	height:350px;
	overflow:hidden;

	figure img{
		width:400px;
	}
} 

.promo.components{
	background:#55a69f;
	height:350px;
	overflow:hidden;

	figure img{
		width:400px;
	}
} 

.promo.old-style-guide{
	background:#dbd8d4;
	height:350px;
	overflow:hidden;
	h3{
		color:#444;
	}
	figure img{
		width:400px;
	}
} 

.promo.noogler{
	background:$adWordsGreen;
	height:350px;
	overflow:hidden;

	figure img{
		width:400px;
	}
} 

.promo.download{
	background:#f3c557;
	height:350px;
	overflow:hidden;

	figure{
		padding-top:30px;
		a{
			display:block;
			margin:0 0 10px 0;
			img{
				height:25px;
				position:relative;
				top:-5px;float:left;
				margin-right:10px;
			}
		}
		&:hover{
			img{
				margin-top:0;
			}
		}
	}
} 

.promo.reviews{
	background:#92bdc1;
}



/* sections */
/* ========================================= */

section{
	padding:50px 0;

	hgroup{
		margin-bottom:50px;
	}
}

section.what{
	background:#fff;
	p{color:#4d4d4d}
	h2{color:#282828}
}

section.why{
	.wrapper{
		border-top:1px solid #efefef;
		padding-top:50px;
	}
	hgroup{
		text-align:center;
		h2{color:#282828}
		h4{
			font-size:20px;
			color:#888888;
		}
	}
	.grid-pad{
		div {
			p{
				background:#f6f6f6;
				padding:20px;
				height:220px;
				color:#6f6c6c;
				font-weight:400;
			}
			
			&:nth-child(1) p{
				border-top:5px solid #fcbb12;
			}
			&:nth-child(2) p{
				border-top:5px solid #36b878;
			}
			&:nth-child(3) p{
				border-top:5px solid #f05523;
			}
			&:nth-child(4) p{
				border-top:5px solid #6584c2;
			}
		}
	}
	.grid-pad {
	  padding: 5px 0 5px 5px;
	  [class*='col-']{
	  	padding-right:20px;
	  }
	  [class*='col-']:last-of-type {
	    padding-right: 10px;
	  }
	}

}
section.sample{
	background:#DBD8D3;
	padding-bottom:0;
	padding-top:80px;
	.content{
		width:700px;
		h2{
			color:#333;
		}
		h3{
			color:#443a35;
			font-size:23px;
			font-weight:100;
			line-height:32px;
		}
		p{
			color:#282727;
		}
		p.scribble{
			margin-top:70px;
			font-family: 'Shadows Into Light Two', cursive;
			font-size:24px;
			color:rgba(0,0,0,0.5);
		}

	}
	figure{
			height:759px;
			overflow:hidden;
			width:1002px;
			margin-left:-50px;
			img{
				position:relative;
			
				@include transition(all 0.4s ease-in-out);
				@include border-radius(5px);
				
			}
			&:hover{
				img{
					
				}
			}
		}
}
section.who{
	background:#92bdc1;
	hgroup{
		text-align:center;
		h2{color:#282828}
		h3{color:#fff;}
	}
	ul{
		background:#fff;
		li{
			display:block;
			overflow:hidden;
			padding:15px;
			border-bottom:1px solid #f8f8f8;
			&.header{
				background:#eeeeee;
				color:#b9b9b9;
				font-weight:bold;
				font-size:13px;
				padding:10px;
				>span{font-size:13px; padding:0; color:#aaa; height:auto}
			}
			span{display:block; float:left;}
			.name{
				width:233px;
				padding-top:25px;
				font-size:18px;
				a{color:#007ee6}
				img{float:left;margin-top:-25px; margin-right:10px;}
			}
			.description{
				width:430px;
				padding-right:50px;
				padding-top:28px;
				color:#888;
				font-size:14px;
				line-height:16px;
			}
			.size{
				width:100px;
				padding-top:28px;
			}
			.verdict{
				width:100px;

				height:90px;
				&.bad{
					background:url(../img/bad.png) 0 20px no-repeat;
				}
				&.good{
					background:url(../img/good.png) 0 20px no-repeat;
				}
				&.ok{
					background:url(../img/ok.png) 0 20px no-repeat;
				}
			}
		}
	}
}
section.plan{
	background:#43525a;
	padding:60px 0 100px;
	h3{
		color:#f971a4;
	}
	p{
		color:#fff;
	}
	.content{
		width:400px!important;
	}
	figure{
		padding-top:120px;
		h4{
			font-size:18px;
			line-height:22px;
			color:rgba(255,255,255,0.6);
			margin-bottom:30px;
		}
		ul{
			width:auto;
			overflow:hidden;
			li{
				overflow:hidden;
				padding:3px;
				display:block;
				margin:0 0 10px 0;
				width:45%;
				float:left;

				div.thumb{
					width:50px;
					height:50px;
					@include border-radius(25px);
					background-position:50% 50%;
					background-size:100% auto;
					@include box-shadow(0px 1px 3px rgba(0,0,0,0.6));
					float:left;
					margin:0 5px 0 0;
				}
				div.info{
					h5{
						font-size:13px;
						font-weight:normal;
						margin:0 0 5px 0;
						color:#fff;
						padding-top:5px;
					}
					span{
						display:block;
						color:rgba(255,255,255,0.6);
						font-size:12px;
					}

				}
			}
		}


	}
}
section.latest-work{
	background:#5a636a;
	padding-bottom:0;
	hgroup{
		h1{color:#fff;}
		p{
			color:#000; 
		}
	}

	.work-list{
		margin-top:50px;
		background:#e9e9e9 url(../img/bg-worklist-header.png) 0 0 repeat-x;
		padding-bottom:150px;
		text-align:center;
	}
}

section.risks{
	background:#303030;
	padding:60px 0 100px;
	p{
		color:#9a9a9a;
	}
	figure{
		width:200px!important;
		padding-top:60px;
	}
	.content{
		width:600px!important;
		padding-right:100px;
	}
}

.hero{
	background: #db588a;
	padding:100px 0;
	text-align:center;

	h3{
		font-weight:light;
		
		margin:50px 0 30px 0;
	}
	h1{
		font-weight:400;
		font-size:40px;
	}
	.google{
		position:relative;
		right:5px;
		top:20px;
	}
	.dribbble{
		position:relative;
		left:5px;
		top:2px;
	}
}

.office-hours{
	padding:25px 0 15px;
	background:#181818;
}

.iframe-wrapper{
	background:url(../img/bg-iframe.png);
	padding:50px 0;
	margin:50px 0 0;
}
section.style-guide{
	padding-bottom:0;
	#iframe{
		width:1200px;
		margin:0px auto 0;
		display:block;
		height:1000px;
		@include border-radius(5px);
		border-top:none;
		overflow:hidden;
		@include box-shadow(0px 2px 4px rgba(0,0,0,0.4));
		background:#fff;
	}
}
.process{
	background:#f7f7f7;

	h1{
		color:$darkGrey;
	}

	.links{
		padding-top:65px;
	}
	.links a{
		color:$adWordsBlue;
		display:block;
		margin:0 0 10px;
	}

	.timeline{
		position:relative;

		&:after{
			display:block;
			content:'';
			width:5px;
			background:#ddd;
			bottom:150px;
			top:0;
			left:50%;
			margin-left:-3px;
			position:absolute;
			z-index:1;
		}

		article{
			z-index:2;
			position:relative;
			margin-right:50%;
			@include opacity(0);
			@include transition(all 0.4s ease-in-out);

			&.show{
				@include opacity(1);
			}

			&.right{
				margin-left:50%;
				margin-right:0;
				.icon{
					left:-25px;
					float:none;
				}

				.bubble::before {	
					box-shadow: 2px -2px 2px 0 rgba( 178, 178, 178, .4 );
				    left: -9px;
				    box-shadow: -2px 2px 2px 0 rgba( 178, 178, 178, .4 );
				}
			}

			.icon{
				@include inline-block;
				width: 50px;
				height:50px;
				@include border-radius(25px);
				background:$adWordsBlue;
				position:relative;
				left:auto;
				right:-25px;
				float:right;
				line-height:50px;
				text-align:center;
				color:#fff;
				font-size:20px;
				font-weight:normal;
			}

			&.two{
				.icon{
					background:$adWordsGreen;
				}
				.bubble h3{
					color:$adWordsGreen;
				}
			}
			&.three{
				.icon{
					background:$adWordsYellow;
				}
				.bubble h3{
					color:$adWordsYellow;
				}
			}
			&.four{
				.icon{
					background:$adWordsRed;
				}
				.bubble h3{
					color:$adWordsRed;
				}
			}
		}

		.bubble{
		    background-color: #ffffff;
		    box-shadow: 0 0 6px #B2B2B2;
		    display: inline-block;
		    padding: 30px;
		    position: relative;
		    vertical-align: top;
		    margin:-40px 40px 0;

		    h3{
		    	font-size:22px;
		    	margin-bottom:15px;
		    	font-weight:100;
		    	color:$adWordsBlue;
		    }
		    p{
		    	font-size:13px;
		    	line-height:18px;
		    	color:#8c8989;
		    }
		}

		.bubble::before {
		    background-color: #ffffff;
		    content: "\00a0";
		    display: block;
		    height: 16px;
		    position: absolute;
		    top: 11px;
		    width:  20px;
		    @include transform(rotate( 29deg ) skew( -35deg ));
		    box-shadow: 2px -2px 2px 0 rgba( 178, 178, 178, .4 );
			right: -9px;  
		}
	}
}

.getting-started{
	background:$adWordsGreen;
	h1, p.lead{color:#ffffff;}

	.wrapper{background: url(../img/path.png) 22px 280px no-repeat;;}

	.step{
		margin:100px 0;
		article{
			width:380px;
			float:left;

			h2{
				font-size:26px;
				line-height:30px;
				color:#fff;
				font-weight:lighter;
				
				margin:0 0 20px;
			}

			p{
				font-size:16px;
				line-height:22px;
				color:#fff;
				font-weight:lighter;
				padding-left:60px;
			}
			.batch{
				@include border-radius(25px);
				height:50px;
				width:50px;
				@include inline-block;
				text-align:center;
				line-height:50px;
				color:#fff;
				font-size:20px;
				font-weight:100;
				margin-right:10px;
			}
		}
		aside{
			background:#319c52;
			@include border-radius(10px);
			width:430px;
			float:right;
			padding:25px;
			h3{
				color:#fff;
				font-size:16px;
				line-height:20px;
				padding-left:50px;
				background:url(../img/icon-help.png) 0 0 no-repeat;
				margin-bottom:20px;
				min-height:38px;

				@include opacity(0.8);
			}
			p{
				color:#103f1f;
				text-shadow:0px 1px 0px rgba(255,255,255,0.2);
				font-size:14px;
				line-height:18px;
			}
		}
		&:nth-child(odd){
			aside{
				float:left;
			}
			article{
				float:right;
				margin-right:25px;
			}
		}
		&.software{
			.batch{
				background:#287484;
			}
		}
		&.hardware{
			.batch{background:#e8c449;}
		}
		&.gcard{
			.batch{background:#f58039;}
		}
		&.learning-adwords{
			.batch{background:#c44b4b;}
		}
	}
}

.team{
	background:#212221;

	ul.team{
		li{
			width:25%;
			float:left;
			margin:0 0 80px 0;
			text-align:center;
		}
		div.thumb{
			width:128px;
			height:128px;
			@include border-radius(64px);
			background-repeat:no-repeat;
			background-position:50% 50%;
			display:block;
			margin:0 auto 10px;
			background-size:100% auto;
		}
		a{
			color:#cd9e1b;
			font-size:16px;
			font-family: 'Roboto Slab', serif;
			margin:0 0 5px 0;
			display:block;
		}
		span.title{
			font-size:14px;
			color:#fff;
			display:block;
			margin-bottom:5px;
		}
		span.location{
			color:#686868;
			font-size:14px;
			font-family: 'Roboto Condensed', sans-serif;
			display:block;
		}
	}
}

section.faq{
	background:#222;
	a{color:#f8da75;}
	h1{color:#888}
	p.lead{
		color:#aaa;
	}
	h3{
		font-size:20px;
		font-weight:100;
		margin:0 0 0px 0;
		padding-left:20px;
		background:url(../img/caret.png) 0 3px no-repeat;
		a{
			color:#ccc;
		}
	}
	div.faq{
		padding:20px 0;
		border-bottom:1px solid rgba(255,255,255,0.05);
		p{
			display:none;
			padding-left:20px;
			color:#999;
			font-size:15px;
			padding-top:15px;
			line-height:21px;
			font-weight:600;
			margin:0;
		}
		&.expanded{
			h3{
				background:url(../img/caret-open.png) 0 3px no-repeat;
			}
			p{
				
				
			}
		}
	}
	ul.bullets{
		margin-top:50px;
		li{
			margin:0 0 10px 20px;
			padding-left:0px;
			list-style:square;
		}
	}
}

footer{
	padding:100px 0;
	background:#3f3f3b;
	a{color:$adWordsBlue;}
	p.lead{
		color:#fff;
		margin:0 0 50px 0;
	}
	p.light{
		font-size:13px;
		color:#68798e;
		font-family: 'Roboto Condensed', sans-serif;
	}
	img.logo{
		float:left;
		position:relative;
		top:-8px;
	}
}




/**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}